<template>
	<view>
		<!-- 传入符合 datacom 规范的数据，即可渲染出一个选择器  -->
			  <!-- 使用 v-model 双向绑定 picker 的选中值 -->
		<view class="dz-from-bz" v-show="isshow">
			<!-- site_name == '' 是 直接创建工单 -->
			<view v-if="site_name == ''" class="dz-from-bz-flex">
				<uni-data-picker placeholder="请选择区域" popup-title="请选择区域" v-model="area_id" :localdata="areaList"
					style="width: 100%;"></uni-data-picker>
				<uni-data-picker placeholder="请选择巡检点" popup-title="请选择巡检点" v-model="area_site_id" :localdata="siteList"
					v-if="area_id > 0" style="width: 100%;margin-top:10px;"></uni-data-picker>
			</view>
			<view v-else>
				<!-- site_name != '' 是从巡检页创建的工单 -->
				巡检点：{{site_name}}
			</view>
		</view>
		
		<view class="dz-line" v-show="isshow"></view>
		<view class="dz-from-bz" v-show="isshow" style="padding: 18px 18px 8px;">
			<view>问题描述</view>
			<view class="dz-from-bz-text">
				<textarea v-model="content" auto-height :placeholder= "placeholder" :disabled="!canEdit" />
				<view class="dz-from-fj">
					<view ref="input" class="input"></view>
					<fileUploader limitsize="10240" @get-img="getImg" v-if="canEdit"></fileUploader>
					<view v-else class="dz-from-fj-edit" v-for="(item,index) in imgArr" :key="index">
						<image :src="item" class="dz-from-fj-img-img"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="dz-line" v-show="isshow && canEdit"></view>
		<view v-show="isshow && canEdit" class="dz-from-bz" style="padding: 18px 18px 0;">
			<view>请选择工单紧急程度</view>
			<view class="dz-from-jc-">
				<radio-group class="dz-from-jc" @change="radioChangeUrgency">
					<view class="dz-jcx" v-for="(item,index) in levelList" :key="index">
						<view class="dz-jcx-l">
							<view class="dz-jcx-no">{{index+1}}</view>
							{{item.name}}
						</view>
						<label class="uni-list-cell uni-list-cell-pd">
							<view>
								<radio :value="item.value" :checked="(item.id+'_'+item.value) == ite" color="#4d72ff"
									style="transform:scale(0.85)" :disabled="!canEdit" />
							</view>
						</label>
					</view>
				</radio-group>
			</view>
		</view>
		<button @tap="createOrder" :loading="isSubmit" class="primary">立即创建工单</button>
		<view style="height: 18px;"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import fileUploader from '@/components/fileUploader/fileUploader.vue'
	export default {
		data() {
			return {
				site_name:'',
				isSubmit:false,
				canEdit:true,
				isshow:true,
				content: '',
				imgArr: [],
				
				area_id: 0,
				areaList: [],
				
				area_site_id: 0,
				siteList: [],

				urgencyLevel:0,
				levelList:[
					{name:'低',value:1},
					{name:'中',value:2},
					{name:'高',value:3},
					{name:'紧急',value:4},
				],
				placeholder:'请输入问题描述信息'
			}
		},
		computed: {
			...mapState([
				"userInfo"
			]),
			myAreaId(){
				if(this.area_id != 0){
					this.getSiteList();
				}
			},
		},
		components: {
			fileUploader
		},
		onShow() {

		},
		onLoad(opts) {
			if (opts && opts.area_id) {
				this.area_site_id = opts.area_site_id;
				this.area_id = opts.area_id;
				this.site_name = opts.site_name;
			}
			this.getSiteTree()
		},
		methods: {
			async createOrder(){
				if(this.area_site_id == 0){
					uni.showToast({
						title:'请选择区域和站点',
						icon:'none'
					})
					return
				}
				if(this.content == ''){
					uni.showToast({
						title:'请输入问题描述',
						icon:'none'
					})
					return
				}
				if(this.imgArr.length == 0){
					uni.showToast({
						title:'请上传图片',
						icon:'none'
					})
					return
				}
				if(this.urgencyLevel == 0){
					uni.showToast({
						title:'请选择工单紧急程度',
						icon:'none'
					})
					return
				}
				if(this.isSubmit) return
				this.isSubmit = true
				let res = await this.$lib.$http.post({
					url:this.$lib.$urlMap.createOrder,
					data:{
						area_site_id:this.area_site_id,
						level:this.urgencyLevel,
						content:this.content,
						images:this.imgArr.join(',')
					},
					needLogin:true
				})
				if(res.code == 1){
					this.isSubmit = false
					uni.showToast({
						title:'提交成功'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				}else{
					this.isSubmit = false
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			//紧急程度
			radioChangeUrgency: function (e) {
				this.urgencyLevel = e.target.value
			},
			async getSiteTree() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.siteTree,
					data: {},
					needLogin: true
				})
				if (res.code == 1) {
					this.areaList = res.data
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			async getSiteList(){
				let res = await this.$lib.$http.post({
					url:this.$lib.$urlMap.siteTree1,
					data:{
						area_id:this.area_id
					}
				})
				if(res.code == 1){
					this.siteList = res.data
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			getImg(data) {
			    this.imgArr = data
			},
		}
	}
</script>

<style>
	page{background: #f5f5f5;}
	.dz-from {
	    display: flex;
	    padding: 18px;
	    width: 90%;
	    margin: 0 auto;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 16px;
	}
	
	.dz-from-bz {
	    display: flex;
	    padding: 18px;
	    width: 90%;
	    margin: 0 auto;
	    align-items: flex-start;
	    flex-direction: column;
	    font-size: 16px;
		background: #fff;
	}
	
	.dz-from-time {
	    display: flex;
	    align-items: center;
	    font-size: 15px;
	}
	
	.dz-from-top .dz-from-time:first-child {
	    margin-bottom: 3px;
	}
	
	.dz-from .iconfont {
	    font-size: 18px;
	    color: #8d8d8d;
	    margin-right: 3px
	}
	
	.dz-line {
	    height:10px;
	}
	
	.dz-from-column {
	    flex-direction: column;
	}
	
	.dz-from .dz-jcx {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: 100%;
	    flex: 1;
	    margin-bottom: 18px;
	}
	
	.dz-from .dz-jcx:last-child {
	    margin-bottom: 0;
	}
	
	.dz-jcx-l {
	    flex: 1;
	    margin-right: 14px;
	    width: 70%;
	    display: flex;
	    align-items: center;
	}
	
	.dz-jcx-input {
	    display: block;
	    font-size: 16px;
	    line-height: 1.8em;
	    height: 1.8em;
	    min-height: 1.8em;
	    overflow: hidden;
	    width: 30%;
	    padding: 5px 9px;
	    border: solid 1px #d6d6d6;
	}
	.dz-from-jc-{
		width: 100%;
		margin-top: 14px;
	}
	.dz-from-jc {
	    display: flex;
		align-items: flex-start;
		flex-direction: column;
	    width: 100%;
	}
	
	.dz-from-button {
	    margin: 18px;
	    padding-bottom: 18px;
	}
	
	.dz-from-bz-text {
	    width: 100%
	}
	
	.dz-from-bz-text textarea {
	    padding: 12px 0;
	    width: 100%;
		font-size: 15px;
		min-height: 30px;
	}
	
	.dz-from-fj {
	    display: flex;
	    flex-wrap: wrap;
	}
	.dz-from-bz-flex{display:flex;flex-direction:column;align-items: self-start;width: 100%;}
	.dz-from-fj-edit {
	    width: 80px;
	    border: solid 1px #efefef;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    height: 80px;
	    color: #adadad;
	    font-size: 14px;
	    margin-right: 10px;
	    justify-content: center;
	    position: relative;
	    margin-bottom: 10px
	}
	
	.dz-from-fj-edit .iconfont {
	    font-size: 24px;
	    margin-bottom: 1px
	}
	
	.dz-from-fj-img-img {
	    width: 80px;
	    height: 80px;
	}
	
	.dz-from-jian {
	    position: absolute;
	    right: 2px;
	    top: 2px;
	}
	
	.dz-from-jian .iconfont {
	    color: rgb(255, 255, 255);
	    font-size: 11px;
	    transform: rotate(45deg);
	    border-radius: 50%;
	    padding: 3px;
	    background: rgb(68, 138, 255);
	}
	
	.shenpi-list-r {
	    color: #9f9f9f;
	    margin-left: 7px;
	}
	
	.dz-just {
	    justify-content: space-between;
	    width: 100%;
	}
	
	.dz-jcx-no {
	    background: #4d72ff;
	    color: #fff;
	    font-size: 12px;
	    width: 18px;
	    height: 18px;
	    border-radius: 2px;
	    text-align: center;
	    line-height: 18px;
	    margin-right: 6px;
	}
	
	.dz-wei {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 92%;
	    border: dashed 2px #e0e0e0;
	    padding: 11px;
	    margin-top: 14px;
	}
	
	.dz-wei .iconfont {
	    font-size: 21px;
	    margin-top: 4px;
	    margin-right: 1px;
	}
	.dz-jcx{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: 100%;
	    flex: 1;
	    margin-bottom: 18px;
	}
	.primary{
	    background: #4d72ff!important;
	    box-shadow: 0 2px 11px rgb(0 56 216 / 15%);
	    color: #fff!important;
	    border-radius: 30px;
	    font-size: 17px;
	    padding: 2px;
	    width: 90%;
		margin-top: 18px
	}
</style>
